<template>
    <el-container>
        <el-header>
            <el-row type="flex" justify="space-between" align="middle">
                <div></div>
                <h2 style="color: #fff;">学生信息管理系统</h2>
                <!-- <h2 style="color: #fff;">修改学生信息管理系统</h2> -->
                <el-popover placement="top-start" width="100" trigger="click">
                    <div style="text-align: center;">
                        <div>{{ $store.state.userForm.realName }}</div>
                        <el-divider></el-divider>
                        <el-row>
                            <el-button type="text">
                                <router-link to="/home/mine" tag="span">个人信息</router-link>
                            </el-button>
                        </el-row>
                        <el-row><el-button type="text" @click="goBack">退出登录</el-button></el-row>
                    </div>

                    <template #reference>
                        <el-avatar>
                            <img :src="'/student/v3' + $store.state.userForm.avatar" alt="">
                        </el-avatar>
                    </template>
                </el-popover>

            </el-row>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu :default-active="$route.path" background-color="#304156" text-color="#fff"
                    active-text-color="#fff" router>
                    <el-menu-item index="/home/index">
                        <span slot="title">首页</span>
                    </el-menu-item>
                    <el-menu-item index="/home/classes">
                        <span slot="title">班级管理</span>
                    </el-menu-item>
                    <el-menu-item index="/home/students">
                        <span slot="title">学生管理</span>
                    </el-menu-item>
                </el-menu></el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import { RouterLink } from 'vue-router';
import { removeToken } from '@/utils/cookies';

export default {
    name: "",
    data() {
        return {}
    },
    created() {
        // 实现页面跳转
        // console.log(this.$router);
        // 获取路由信息
        // console.log(this.$route);

        this.$store.dispatch("getUserInfo")
    },
    methods: {
          goBack() {
            console.log("11111111");
            
            //清除本地存储的token
            removeToken()

            // 跳转到登录页
            this.$router.push('/login')

            // 提示
            this.$message.success("已退出登录")
        },
    },
}
</script>

<style lang="scss" scoped>
::v-deep .el-divider--horizontal {
    margin: 5px 0 !important;
}

.el-container {
    height: 100vh;

    h2 {
        margin: 0;
    }

    .el-header {
        background-color: #304156;
        line-height: 80px;
        height: 80px !important;
        padding: 0 100px;
        box-sizing: border-box;
    }

    .el-aside {
        background-color: #304156;

        .is-active {
            background-color: #263445 !important;
        }

        .el-menu {
            border: none !important;
        }
    }


}
</style>